<template>
  <div v-if="isAudit">
    <a-card :bordered="false">
      <div class="about-master-container" v-loading="loading">
        <a-row>
          <a-col span="24">
            <a-form-model-item
              label="应用技术："
            >
              <b-input
                v-model="localForm.technicalName"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col span="24">
            <a-form-model-item
              label="所属单位："
            >
              <b-input
                v-model="localForm.viewName"
                disabled
              />
            </a-form-model-item>
          </a-col>
  <!--        <a-col span="12">-->
  <!--          <a-form-model-item-->
  <!--            label="项目名称："-->
  <!--          >-->
  <!--            <b-input-->
  <!--              v-model="localForm.projectName"-->
  <!--              disabled-->
  <!--            />-->
  <!--          </a-form-model-item>-->
  <!--        </a-col>-->
          <a-col span="24">
            <a-form-model-item
              label="附件上传："
            >
              <file-link :can-download="canDownload" :fileList="localForm.fileArrays" style="margin-top:-3px"></file-link>
            </a-form-model-item>
          </a-col>
        </a-row>
        <b-table
          :show-page="false"
          ref="table"
          bordered
          :columns="columns"
          :request="loadData"
        >
        <span
          slot="index"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        </b-table>
        <div v-if="!isConsultation" class="pull-right mt20 page-btn-right-top">
          <a-button type="primary" @click="$close" v-check-visible-in-detail>关闭</a-button>
        </div>
      </div>
    </a-card>
  </div>
  <a-modal
    v-else
    title="新技术应用情况上报"
    :visible="visible"
    class="normal-modal"
    @cancel="$emit('update:visible', false)"
  >
    <template slot="footer">
      <a-button @click="$emit('update:visible', false)">取消</a-button>
    </template>
    <!-- 新技术应用情况详情 -->
    <div class="about-master-container" v-loading="loading">
      <a-row>
        <a-col span="24">
          <a-form-model-item
            label="应用技术："
          >
            <b-input
              v-model="localForm.technicalName"
              disabled
            />
          </a-form-model-item>
        </a-col>
        <a-col span="24">
          <a-form-model-item
            label="所属单位："
          >
            <b-input
              v-model="localForm.viewName"
              disabled
            />
          </a-form-model-item>
        </a-col>
<!--        <a-col span="12">-->
<!--          <a-form-model-item-->
<!--            label="项目名称："-->
<!--          >-->
<!--            <b-input-->
<!--              v-model="localForm.projectName"-->
<!--              disabled-->
<!--            />-->
<!--          </a-form-model-item>-->
<!--        </a-col>-->
        <a-col span="24">
          <a-form-model-item
            label="附件上传："
          >
            <file-link :fileList="localForm.fileArrays" style="margin-top:-3px"></file-link>

          </a-form-model-item>
        </a-col>
      </a-row>
      <b-table
        :show-page="false"
        ref="table"
        bordered
        :columns="columns"
        :request="loadData"
      >
       <span
         slot="index"
         slot-scope="text, record, index"
       >{{ index + 1 }}</span>
      </b-table>
    </div>
  </a-modal>
</template>
<script>

import { getStatistics, getTechnologyDetail } from '@/api/technology'
import store from '@/store'

export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      localForm: { recordList: [], applyUnit: '套' , viewName: ""},
      loadData: () => {
        return { code: this.SUCCESS_CODE, data: this.localForm.recordList }
      },
      loading: false,
      canDownload: false
    }
  },
  computed: {
    columns() {
      return [
        {
          title: '序号',
          width: '65px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '应用工程量',
          dataIndex: 'applicationNumber'
        },
        {
          title: `实物量（${this.localForm.applyUnit}）`,
          dataIndex: 'entityMeasure'
        },
        {
          title: '投入经费（万元）',
          dataIndex: 'investmentOutlay'
        },
        {
          title: '生产效益（万元）',
          dataIndex: 'productionBenefit'
        }
      ]
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.getDetail(this.form.id)
      } else {
        this.localForm = { recordList: [], applyUnit: '套' }
      }
    }
  },
  created() {
    if (this.isAudit) {
      this.getDetail(this.$route.query.id)
    }
    let btnPermissionList = this.$store.getters.btnPermission
    const index = btnPermissionList.findIndex(item => item.code === 'stm_006_dow_04')
    this.canDownload = index > 0
  },
  methods: {
    async getDetail(id) {
      this.loading = true
      let res = await getTechnologyDetail({ id })
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.localForm = res.data
        this.localForm.viewName = this.localForm.branchCompany + "/" + this.localForm.projectName
        if (!this.localForm.recordList) {
          this.localForm.recordList = []
        }
        this.localForm.recordList.push({
          applicationNumber: this.localForm.applicationNumber,
          entityMeasure: this.localForm.entityMeasure,
          investmentOutlay: this.localForm.investmentOutlay,
          productionBenefit: this.localForm.productionBenefit
        })
        this.$refs.table && this.$refs.table.getData(null, true)
      }
    }
  }
}
</script>
